<template>
  <div id="detailapplybox" class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-button type="primary" plain @click="backlist" size="small"><i class="el-icon-back"></i>返回列表</el-button>
      <div class="applybody mt-40">

        <el-form :model="editForm" label-width="160px" ref="editForm">
          <el-form-item label="" prop="pic">
            <p class="titleword">请为 <span class="studentName">{{pageOption?pageOption.student_name:'--'}}</span>
              小朋友做此区角的{{pathOption.type==1?'实时采集':'评价'}}，记录生活</p>
          </el-form-item>
          <div v-if="pathOption.type==1">
            <el-form-item label="评价图片:" prop="pic">
              <!--class="addicon"-->
              <el-upload
                      class="addicon"
                      accept="image/png, image/jpeg"
                      list-type="picture-card"
                      :action="$uploadImg"
                      :file-list="fileList"
                      :limit="9"
                      :on-success="handleSuccess"
                      :on-remove="handleRemove"
                      :before-upload="beforeAvatarUpload">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="评价视频:">
              <el-upload
                      class="addicon"
                      :action="$uploadImg"
                      :show-file-list="false"
                      accept=".mp4"
                      :limit="1"
                      :on-success="handlevideoSuccess"
                      :before-upload="beforevideoUpload"
              >
                <div v-if="editForm.video!==''">
                  <video :src="imghttp+editForm.video"
                         class="avatar"
                         controls="controls"
                  >您的浏览器不支持视频播放
                  </video>
                  <span class="detelBox" @click.stop="handlevideoRemove">删除</span>
                </div>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div
                        slot="tip"
                        class="el-upload__tip"
                >介绍视频记录学生活动，如有需要请上传，最多上传一个（仅支持50M以内的MP4格式）
                </div>
              </el-upload>
            </el-form-item>
            <el-row>
              <el-col :span="16">
                <el-form-item label="点评:">
                  <el-input v-model="editForm.content" auto-complete="off" placeholder="填写该生点评" type="textarea"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>
            </el-row>
          </div>
          <div v-else>
            <el-row>
              <el-col :span="16">
                <el-form-item label="评级:" prop="desc">
                  <el-radio-group v-model="typeStudent">
                    <el-radio :label="4">特长</el-radio>
                    <el-radio :label="3">优秀</el-radio>
                    <el-radio :label="2">良好</el-radio>
                    <el-radio :label="1">加强</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>
            </el-row>
          </div>
          <el-form-item label="" prop="position">
            <el-button type="primary" size="small" @click="submitForm()">保存</el-button>
            <el-button size="small" @click="backlist">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import api from '@/utils/api.js'

  export default {
    data () {
      return {
        editFormVisible: false,
        imghttp: '/',
        uploadPic: [],
        fileList: [],
        editForm: {
          pic: '',
          video: '',
          content: ''
        }, // 编辑界面数据
        pathOption: this.$route.query,
        typeStudent: 1,
        pageOption: null
      }
    },
    created () {
      console.log('接受的数据：', this.pathOption)
      this.pageOption = JSON.parse(this.pathOption.option)
    },
    methods: {
      backlist () {
        this.$router.go(-1)
      },
      submitForm () {
        let url = ''
        let data_ = {}
        // 评价
        if (Number(this.pathOption.type) === 2) {
          url = api.admin_corner_open_class_fraction // 对学生进行评价
          // id 	字符串 	必填 	1 	- 	申请id
          // fraction 	字符串 	必填 	1 	- 	评分（0:未评价1:待提高2:良好3:优秀）
          data_.corner_id = this.pageOption.corner_id
          data_.student_id = this.pageOption.student_id
          data_.fraction = this.typeStudent
        } else {
          url = api.admin_corner_apply_commment_add // 对学生进行最终评价
          // apply_id 	整型 	必填 	1 	- 	申请id
          // content 	整型 	必填 	1 	- 	文字
          // pic 	整型 	必填 	1 	- 	图片
          // video 	整型 	必填 	1 	- 	视频
          console.log('editForm:', this.editForm, this.uploadPic.length)

          if (!this.editForm.content && !this.editForm.video && this.uploadPic.length === 0) {
            this.$message.error('请对该生做出相应的评价')
            return
          }
          // corner_id 区角id
          data_.corner_id = this.pathOption.corner_id
          // student_id 学生id
          data_.student_id = this.pageOption.id
          data_.content = this.editForm.content
          data_.pic = this.uploadPic.join(',')
          data_.video = this.editForm.video
        }
        console.log('提交的数据：', data_)

        this.$post(url, data_).then((response) => {
          if (response.code === 0) {
            this.$message({
              message: '编辑成功',
              type: 'success'
            })
            if (Number(this.pathOption.type) === 1) {
              this.uploadPic = []
              this.editForm.video = ''
              this.editForm.content = ''
              this.fileList = []
            } else {
              this.backlist()
            }
          } else {
            this.$message.error(response.msg)
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      handleSuccess (response) {
        this.uploadPic.push(response.data.name)
      },
      beforeAvatarUpload (file) {
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isLt2M
      },
      handlevideoSuccess (res, file) {
        if (res.code === 0) {
          this.editForm.video = res.data.name
        }
      },
      handleRemove (file, fileList) {
        let index_ = this.uploadPic.indexOf(file.response.data.name)
        this.uploadPic.splice(index_, 1)
      },
      handlevideoRemove () {
        this.editForm.video = ''
      },
      beforevideoUpload (file) {
        const isLt50M = file.size / 1024 / 1024 < 50
        if (['video/mp4'].indexOf(file.type) == -1) {
          this.$message.error('请上传正确的视频格式')
          return false
        }
        if (!isLt50M) {
          this.$message.error('上传视频大小不能超过50MB哦!')
          return false
        }
      }
    },
    mounted () {
    }
  }
</script>


